/**
 * 全局自定义样式文件
 * 用于设置项目的全局样式、变量和通用类
 */

// ==================== 全局变量 ====================
:root {
  // 主题色彩
  --primary-color: #0077ff;
  --primary-light-color: #1e80ff;
  --success-color: #4cd964;
  --warning-color: #f0ad4e;
  --error-color: #e92019;
  --info-color: #909399;
  --green-color: #28cb61;

  // 文字颜色
  --text-black: #000000;
  --text-white: #ffffff;
  --text-primary: #333333;
  --text-regular: #666666;
  --text-secondary: #999999;
  --text-placeholder: #c0c4cc;
  --text-green: #28cb61;
  --text-orange: #ff8c00;

  // 背景色
  --bg-white: #ffffff;
  --bg-grey: #dbdbdd;
  --bg-grey-light: #ececec;
  --bg-primary: #f8f8f8;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #020202;
  --bg-warm: #fff7f0;
  --bg-blue-light: #f0f7ff;

  // 边框色
  --border-color: #e4e7ed;
  --border-light: #ebeef5;
  --border-lighter: #f2f6fc;

  // 阴影
  --shadow-light: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
  --shadow-base: 0 2rpx 4rpx rgba(0, 0, 0, 0.12), 0 0 6rpx rgba(0, 0, 0, 0.04);

  // 圆角
  --border-radius-small: 8rpx;
  --border-radius-base: 12rpx;
  --border-radius-large: 16rpx;

  // 间距
  --spacing-xs: 8rpx;
  --spacing-sm: 16rpx;
  --spacing-md: 24rpx;
  --spacing-lg: 32rpx;
  --spacing-xl: 48rpx;

  // 字体大小
  --font-size-xs: 20rpx;
  --font-size-sm: 24rpx;
  --font-size-md: 28rpx;
  --font-size-lg: 32rpx;
  --font-size-xl: 36rpx;
  --font-size-2xl: 40rpx;
  --font-size-3xl: 48rpx;
  --font-size-4xl: 56rpx;
  --font-size-5xl: 64rpx;
}

// ==================== 全局重置样式 ====================
* {
  box-sizing: border-box;
}

page {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

// ==================== 通用布局类 ====================
.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-1 {
  flex: 1;
}

// ==================== 文字样式类 ====================
.text-primary {
  color: var(--text-primary);
}

.text-regular {
  color: var(--text-regular);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-placeholder {
  color: var(--text-placeholder);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}

.text-normal {
  font-weight: normal;
}

// 字体大小
.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-md);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

// ==================== 边框类 ====================
.border {
  border: 1rpx solid var(--border-color);
}

.border-top {
  border-top: 1rpx solid var(--border-color);
}

.border-bottom {
  border-bottom: 1rpx solid var(--border-color);
}

.border-left {
  border-left: 1rpx solid var(--border-color);
}

.border-right {
  border-right: 1rpx solid var(--border-color);
}

.border-none {
  border: none;
}

// ==================== 圆角类 ====================
.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: var(--border-radius-small);
}

.rounded {
  border-radius: var(--border-radius-base);
}

.rounded-lg {
  border-radius: var(--border-radius-large);
}

.rounded-full {
  border-radius: 50%;
}

// ==================== 阴影类 ====================
.shadow-none {
  box-shadow: none;
}

.shadow-light {
  box-shadow: var(--shadow-light);
}

.shadow-base {
  box-shadow: var(--shadow-base);
}

// ==================== 定位类 ====================
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

// ==================== 显示隐藏类 ====================
.hidden {
  display: none !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

// ==================== 溢出处理类 ====================
.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

// 文字溢出省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

// ==================== 宽高类 ====================
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-screen {
  width: 100vw;
}

.h-screen {
  height: 100vh;
}

// ==================== 通用组件样式 ====================
.page-container {
  min-height: 100vh;
  background-color: var(--bg-secondary);
}

.content-wrapper {
  padding: var(--spacing-md);
}

.card {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-light);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.divider {
  height: 1rpx;
  background-color: var(--border-color);
  margin: var(--spacing-sm) 0;
}

// ==================== 按钮样式增强 ====================
.btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius-base);
  padding: var(--spacing-sm) var(--spacing-md);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1rpx solid var(--primary-color);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-sm) var(--spacing-md);
}

// ==================== 动画类 ====================
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// ==================== 响应式辅助类 ====================
.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// 修改按钮主题色
.u-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
